﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="JavaScript/vue.js"></script>
</head>
<body>
    <div id="add">
        <input type="text" v-model="i1" />
        <input type="text"  v-model="i2"/>
        <input type="button" value="=" v-on:click="calcAdd"/>
        <span>{{i3}}</span>
    </div>
    <script type="text/javascript">
        var adddemo = new Vue
            ({
                el: "#add",
                data:
                {
                    i1: 0, i2: 0, i3: 0
                },
                methods:
                {
                    //Controls中不操作UI,只操作model，不能直接给model赋值sss
                    calcAdd: function () {
                        this.i3 = parseInt(this.i1) + parseInt(this.i2)
                    } 
                }
            });
    </script>
</body>
</html>